<template>
  <div id="cesiumContainer" ref="cesiumContainer"></div>
</template>

<script>
import { onMounted, ref } from 'vue';
// import { Viewer, createWorldTerrain } from 'cesium';
import * as Cesium from 'cesium'

Cesium.Ion.defaultAccessToken = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiI0ZjNkZjI0Yi1mNDFkLTRkOGItODg2ZC02Zjk5MjUyNzJjZGUiLCJpZCI6MjUzNzA3LCJpYXQiOjE3MzEwMjgwODJ9.md0xKwmiyGBwggEaSrdO5uIKQY9CNH7pqzKesu1G7Ck'

//自定义图层
const esri = new Cesium.ArcGisMapServerImageryProvider({
  url:"https://services.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer",
  enablePickFeatures:false
})


export default {
  name: 'CesiumViewer',
  setup() {
    const cesiumContainer = ref(null);

    const Cartesian = Cesium.Cartesian3.fromDegrees(117.13881, 34.21684, 1000)
    
    onMounted(() => {
      const viewer = new Cesium.Viewer('cesiumContainer', {
        terrainProvider: Cesium.createWorldTerrain(),
      });

      //相机
      viewer.camera.setView({
        //初始位置
        destination: Cartesian,
        //初始方向
        orientation: {
          heading: Cesium.Math.toRadians(-50), //初始方向
          pitch: Cesium.Math.toRadians(-50), //初始方向
          roll: Cesium.Math.toRadians(0),
        }
      })
    });

    return {
      cesiumContainer
    };
  },
};
</script>

<style scoped>
:deep(.cesium-viewer-bottom) {
  display: none !important;
}

#cesiumContainer {
  width: 100vw;
  height: 100vh;
  overflow: hidden;
}
</style>